<template>
  <div class="el-card">
    <!-- <div class="container"> -->
    <div class="el-card__body">
      <el-form label-width="80px" size="small">
        <el-form-item label="学科名称">
          <el-input
            style="width: 200px"
            v-model="queryParams.subjectName"
            @keydown.enter.native="getList"
          ></el-input>
          <el-button
            style="margin-left: 15px"
            @click="queryParams.subjectName = ''"
            >清除</el-button
          >
          <el-button type="primary" @click="getList">搜索</el-button>
          <el-button
            type="success"
            icon="el-icon-edit"
            style="float: right"
            @click="$refs.subjAdd.showDialog = true"
            >新增学科</el-button
          >
        </el-form-item>
      </el-form>
      <el-alert type="info" show-icon :closable="false">
        数据一共 <span>{{ total }}</span> 条
      </el-alert>
      <!-- 表格内容 -->
      <el-table :data="formData" style="width: 100%">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="subjectName" label="学科名称" width="120px">
        </el-table-column>
        <el-table-column prop="username" label="创建者" width="120px">
        </el-table-column>
        <el-table-column prop="addDate" label="创建日期" width="220px">
        </el-table-column>
        <el-table-column
          prop="isFrontDisplay"
          :formatter="stateFormat"
          label="前台是否显示"
        >
        </el-table-column>
        <el-table-column prop="twoLevelDirectory" label="二级目录">
        </el-table-column>
        <el-table-column prop="tags" label="标签"> </el-table-column>
        <el-table-column prop="totals" label="题目数量"> </el-table-column>
        <el-table-column label="操作" width="220px">
          <!-- 插槽 -->
          <template slot-scope="{ row }">
            <el-button type="text" size="mini" @click="subjectType(row)"
              >学科分类</el-button
            >
            <el-button type="text" size="mini" @click="subjectLabel(row)"
              >学科标签</el-button
            >
            <el-button
              type="text"
              size="mini"
              @click="$refs.subjAdd.update(row)"
              >修改</el-button
            >
            <el-button type="text" size="mini" @click="del(row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="ViewPager">
        <el-pagination
          @size-change="handleSizeChange"
          background
          @current-change="onPageChange"
          :current-page="queryParams.page"
          layout=" prev, pager, next,total, sizes, jumper"
          :page-sizes="[10, 15]"
          :page-size="queryParams.pagesize"
          :total="total"
        >
        </el-pagination>
      </div>
    </div>
    <!-- </div> -->
    <!-- 组件放置 -->
    <subjects-add ref="subjAdd" @done="getList" />
  </div>
</template>

<script>
// 引入接口
import { list, remove } from "@/api/hmmm/subjects";
// 引入组件
import subjectsAdd from "../components/subjects-add.vue";
export default {
  components: {
    subjectsAdd,
  },
  data() {
    return {
      formData: [],
      queryParams: {
        page: 1,
        pagesize: 10,
        subjectName: "",
      },
      total: 0,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    // 定义一个函数 获取学科列表
    getList() {
      list(this.queryParams).then((res) => {
        // console.log(res.data);
        // 将返回的学科列表数据赋值给formData
        this.formData = res.data.items;
        this.total = res.data.counts;
        // console.log(this.formData);
      });
    },
    stateFormat(row, column) {
      // console.log(row.isFrontDisplay);
      if (row.isFrontDisplay == 1) {
        return "是";
      } else {
        return "否";
      }
    },
    onPageChange(newPage) {
      // console.log(newPage);
      this.queryParams.page = newPage;
      this.getList();
    },
    handleSizeChange(newSize) {
      // console.log(newSize);
      this.queryParams.pagesize = newSize;
      this.getList();
    },
    // 删除
    del(row) {
      // await remove(row);
      // this.getList();
      this.$confirm("此操作将永久删除该学科, 是否继续?")
        .then(() => {
          return remove(row);
        })
        .then(() => {
          this.$message.success("删除成功");
          // 判断删除的学科是当前页面的最后一个数据的话，并且当前页码大于1时  获取前一页的学科列表
          if (this.formData.length == 1 && this.queryParams.page > 1) {
            this.queryParams.page--;
          }
          // 重新获取学科列表
          this.getList();
        })
        .catch(()=>{
          console.log('删除失败');
        })
    },
    // 学科分类
    subjectType(row) {
      this.$router.push(
        `/subjects/directorys?id=${row.id}&name=${row.subjectName}`
      );
    },

    subjectLabel(row) {
      this.$router.push(`/subjects/tags?id=${row.id}&name=${row.subjectName}`);
    },
  },
};
</script>

<style scoped lang="scss">
.ViewPager {
  float: right;
  padding: 15px 0;
}
</style>
